<template>
	<view class="header">
		<view class="header-box">
			<view class="setbtn">
				<text class="lg text-gray cuIcon-settings"></text>
			</view>
			<view class="header-item money">
				<view class="much">
					<view class="much-text">
						<view class="much-label">佣金</view>
						<text>49.00</text>
					</view>
				</view>
			</view>
			<view class="header-item">
				<view class="header-img">
					<image src="../../static/logo.png" mode="aspectFill"></image>
				</view>
				<view class="header-content">
					<view class="header-content__name">
						将我们写成故事
					</view>
					<view class="header-content__level">
						<text>[钻石会员]</text>
					</view>
				</view>
			</view>
			<view class="header-item money">
			</view>
		</view>
		<view class="member"></view>

	</view>
</template>

<script>
	export default {
		data() {
			return {

			};
		}
	}
</script>

<style lang="scss">
	.header {
		overflow: hidden;
		height: 9rem;
		position: relative;
		background: #fff;

		.header-box {
			position: relative;
			z-index: 100;
			width: 100%;
			height: auto;
			padding-top: 1rem;
			text-align: center;
			color: #fff;
			display: flex;


			.header-item {
				width: 33.33%;

				&.money {
					margin-top: 20px;
				}

				.much {
					.much-text {
						font-size: 16px;
						margin-bottom: 5px;

						text {
							color: #FEEF20;
							font-size: 14px;
						}
					}
				}

				.header-img {
					width: 45px;
					height: 45px;
					background: #fff;
					margin: auto;
					border-radius: 50%;
					overflow: hidden;
					border: 1px solid #fff;

					image {
						width: 100%;
						height: 100%;
					}
				}

				.header-content {
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;

					.header-content__name {
						height: 1.3rem;
						padding-top: 0.2rem;
						font-size: 0.7rem;
						color: inherit;
						text-align: center;
						white-space: nowrap;
						text-overflow: ellipsis;
						overflow: hidden;
					}

					.header-content__level {
						font-size: 0.6rem;
						color: inherit;
						text-align: center;
					}
				}
			}

			.setbtn {
				position: absolute;
				right: 20px;
				top: 5px;

				text {
					color: #fff;
					font-size: 18px;
				}
			}
		}

		.member {
			position: absolute;
			width: 7rem;
			height: 3rem;
			background: #ff5555;
			z-index: 80;
			-webkit-border-radius: 50%;
			-moz-border-radius: 50%;
			border-radius: 50%;
			bottom: 0;
			left: 50%;
			margin-left: -3.5rem;
			overflow: hidden;
			transform: scale(10, 10);
			ms-transform: scale(10, 10);
			-moz-transform: scale(10, 10);
			-webkit-transform: scale(10, 10);
			-o-transform: scale(10, 10);
			transform-origin: center bottom;
			-ms-transform-origin: center bottom;
			-webkit-transform-origin: center bottom;
			-moz-transform-origin: center bottom;
			-o-transform-origin: center bottom;
			border: 2px solid #ff5555;
		}
	}
</style>
